<template>
  <div class="hello" ref="hello">
    <button @click="handleClick">Insert/Remove</button>
    <div v-if="show" ref="content">I am an element</div>
    <span v-for="i in arr" :key="i">{{i}}</span>
    {{obj}}

    <button @click="update">小修改</button>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  props: ['msg'],
  data() {
    return {
      info: "info",
      show: true,
      arr: [1, 2, 3, 4],
      obj: {
        name: "44"
      }
    }
  },
  created() {
    // console.log("created", this);
    // console.log("created", this.info);
    // console.log("created", this.getFoo);
    // console.log("created", this.msg);
    // console.log("created", this.$refs.hello);
    // this.arr.length = 0

  },

  mounted() {
    // console.log("created", this.$refs.hello);
  },
  methods: {
    getFoo() {

    },
    update() {
      // this.arr[0] = 454
      // this.arr.length = 0
      // this.arr.push(1434)
      // console.log(this.arr);
      // this.obj.age = 454
      this.$set(this.obj, 'age', 455)
      this.$forceUpdate()
      console.log(this.obj);
    },
    async handleClick() {
      this.show = !this.show;
      await this.$nextTick()
      console.log(this.show, this.$refs.content);
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
